<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>03_component_basic</title>
  </head>
  <body>
    <div id="example1"></div>
    <div id="example2"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      /*
        定义组件两种方式：
          1. 工厂函数组件（功能简单的组件）
          2. ES6类组件（功能复杂的组件）

          注意事项：
            1. 组件首字母必须大写
            2. 标签必须有结束符
              单标签带结束符
              双标签
            3. 组件内部渲染的元素，有且只有一个根标签
      */

      // 1. 工厂函数组件（功能简单的组件）
      // 定义组件
      function MyComponent1() {
        // 内部返回组件要渲染的虚拟DOM对象
        console.log("MyComponent1", this);
        return (
          <div>
            <h1>工厂函数组件（功能简单的组件）</h1>
            <input type="text" />
          </div>
        );
      }

      // 渲染组件
      // 使用组件：通过标签方式使用
      ReactDOM.render(<MyComponent1 />, document.getElementById("example1"));
      // ReactDOM.render(
      //   <MyComponent1></MyComponent1>,
      //   document.getElementById("example1")
      // );

      // 2. ES6类组件（功能复杂的组件）
      class MyComponent2 extends React.Component {
        // 内部通过render方法返回组件要渲染的虚拟DOM对象
        render() {
          console.log("MyComponent2", this); // 组件实例对象
          return <h1>ES6类组件（功能复杂的组件）</h1>;
        }
      }

      ReactDOM.render(<MyComponent2 />, document.getElementById("example2"));
    </script>
  </body>
</html>
